<template>
  <el-form class="register" ref="registerRef" :model="registerParam" :rules="Rules">
    <h1 class="register-title">注册register</h1>
    <el-form-item prop="login">
      <el-input size="large" placeholder="请输入账号" prefix-icon="User" v-model="registerParam.login"></el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input size="large" placeholder="请输入密码" show-password prefix-icon="Lock"
                v-model="registerParam.password"></el-input>
    </el-form-item>
    <el-form-item prop="name">
      <el-input size="large" placeholder="请输入姓名" prefix-icon="User"
                v-model="registerParam.name">
      </el-input>
    </el-form-item>
    <el-form-item prop="phone">
      <el-input size="large" placeholder="请输入电话" prefix-icon="Phone" v-model="registerParam.phone"></el-input>
    </el-form-item>
    <el-form-item prop="address">
      <el-select
        v-model="registerParam.address"
        placeholder="请您输入用户地址">
        <el-option
          v-for="item in provinceArr"
          :label="item.value"
          :value="item.name" />
      </el-select>
    </el-form-item>
    <el-form-item prop="age">
      <el-input size="large" placeholder="请输入年龄" v-model="registerParam.age" prefix-icon="Avatar"></el-input>
    </el-form-item>
    <el-form-item prop="sex">
      <el-select v-model="registerParam.sex" placeholder="请选择性别">
        <el-option label="男" value="男"></el-option>
        <el-option label="女" value="女"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-checkbox v-model="registerParam.checked">我已阅读并同意<a href="">《用户协议》</a></el-checkbox>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" size="large" class="register-button" @click="register">注册</el-button>
    </el-form-item>
  </el-form>
</template>
<script setup lang="ts">
import { reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import { Register } from "@/api/user";
import { useRouter } from "vue-router";

let $router = useRouter();

export interface RegisterRequest {
  login: string;
  password: string;
  name: string;
  phone: string;
  address: string;
  checked: boolean;
  age: string,
  sex: string
}

const registerParam: RegisterRequest = reactive({
  login: "",
  password: "",
  name: "",
  phone: "",
  address: "",
  checked: false,
  age: "",
  sex: ""
});
let provinceArr = ref<any>([
  {
    name: "北京市",
    value: "北京市"
  },
  {
    name: "天津市",
    value: "天津市"
  },
  {
    name: "上海市",
    value: "上海市"
  },
  {
    name: "重庆市",
    value: "重庆市"
  },
  {
    name: "河北省",
    value: "河北省"
  },
  {
    name: "河南省",
    value: "河南省"
  },
  {
    name: "云南省",
    value: "云南省"
  },
  {
    name: "辽宁省",
    value: "辽宁省"
  },
  {
    name: "黑龙江省",
    value: "黑龙江省"
  },
  {
    name: "湖南省",
    value: "湖南省"
  },
  {
    name: "安徽省",
    value: "安徽省"
  },
  {
    name: "山东省",
    value: "山东省"
  },
  {
    name: "新疆维吾尔自治区",
    value: "新疆维吾尔自治区"
  },
  {
    name: "江苏省",
    value: "江苏省"
  },
  {
    name: "浙江省",
    value: "浙江省"
  },
  {
    name: "江西省",
    value: "江西省"
  },
  {
    name: "湖北省",
    value: "湖北省"
  },
  {
    name: "广西壮族自治区",
    value: "广西壮族自治区"
  },
  {
    name: "甘肃省",
    value: "甘肃省"
  },
  {
    name: "山西省",
    value: "山西省"
  },
  {
    name: "内蒙古自治区",
    value: "内蒙古自治区"
  },
  {
    name: "陕西省",
    value: "陕西省"
  },
  {
    name: "吉林省",
    value: "吉林省"
  },
  {
    name: "福建省",
    value: "福建省"
  },
  {
    name: "贵州省",
    value: "贵州省"
  },
  {
    name: "广东省",
    value: "广东省"
  },
  {
    name: "青海省",
    value: "青海省"
  },
  {
    name: "西藏自治区",
    value: "西藏自治区"
  },
  {
    name: "四川省",
    value: "四川省"
  },
  {
    name: "宁夏自治区",
    value: "宁夏自治区"
  },
  {
    name: "海南",
    value: "海南"
  },
  {
    name: "台湾",
    value: "台湾"
  },
  {
    name: "香港",
    value: "香港"
  },
  {
    name: "澳门",
    value: "澳门"
  },
  {
    name: "海外",
    value: "海外"
  }
]);
const registerRef = ref<any>();
const Rules = ({
  login: [{
    required: true, message: "请输入账号!", trigger: "blur"
  }],
  password: [{
    required: true, message: "请输入密码!", trigger: "blur"
  }],
  name: [{
    required: true, message: "请输入姓名!", trigger: "blur"
  }],
  phone: [{
    required: true, message: "请输入电话!", trigger: "blur"
  }],
  address: [{
    required: true, message: "请输入地址!", trigger: "blur"
  }],
  age: [{
    required: true, message: "请输入年龄!", trigger: "blur"
  }],
  sex: [{
    required: true, message: "请选择性别!", trigger: "blur"
  }]
});
const register = () => {
  registerRef.value.validate(async (valid: any) => {
    if (valid) {
      console.log(registerParam);
      let res = await Register(registerParam);
      if (res.code === 1) {
        ElMessage.success("注册成功");
        registerRef.value.resetFields();
        await $router.go(0);
      } else {
        ElMessage.error(res.message);
      }
    } else {
      ElMessage.error("请检查表单");
    }
  });
};
</script>
<style scoped>
.register {
  grid-row: 1;
  grid-column: 1;
  opacity: 0;
  transition: 1s ease-in-out;
  padding: 1% 25%;
  z-index: 0;
}

.register.model {
  opacity: 1;
  transition: 1s ease-in-out;
  transition-delay: 0.3s;
  z-index: 1;
}

.register-title {
  text-align: center;
  color: black;
  padding: 20px;
  font-size: 25px;
  font-weight: bold;
}

.register-button {
  width: 100%;
  font-size: 18px;
}
</style>